<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{padding: 0;margin: 0;}

        </style>
    </head>
    <body>
        <button id="btn">打开</button>
        <script>
            class Dialog {
                constructor({title, content}) {
                    this.title = title;
                    this.content = content;
                    this.x = 0;
                    this.y = 0;
                    this.isDown = false;
                    this.mask = null;
                    this.wrap = null;
                    this.cancelBtn = null;
                    this.confirmlBtn = null;
                    this.titleHtml = null;
                    this.create();
                }
                create() {
                    let fragment = document.createDocumentFragment();
                    this.mask = document.createElement('div');
                    this.mask.style.cssText = "position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);z-index: 1001;display: flex;justify-content: center;align-items: center;";
                    this.wrap = document.createElement('div');
                    this.wrap.style.cssText = "width: 300px;height: 200px;background: #fff;border-radius: 5px;display: flex;flex-direction: column;position: relative;left: 0;top: 0;";
                    this.titleHtml = document.createElement('p');
                    this.titleHtml.textContent = this.title;
                    this.titleHtml.style.cssText = "flex-basis: 50px;line-height: 50px;padding: 0 15px;font-size: 16px;font-weight: bold;border-bottom: 1px solid #ccc;cursor: move;"
                    let content = document.createElement('p');
                    content.textContent = this.content;
                    content.style.cssText = "line-height: 30px;padding: 15px;flex-grow: 1;text-align: center;"
                    let bottom = document.createElement('div');
                    bottom.style.cssText = "display: flex;flex-basis: 50px;border-top: 1px solid #ccc;"
                    this.cancelBtn = document.createElement('p');
                    this.cancelBtn.textContent = '取消';
                    this.cancelBtn.style.cssText = 'flex-grow: 1;height: 50px;line-height: 50px;text-align: center;'
                    this.confirmlBtn = document.createElement('p');
                    this.confirmlBtn.textContent = '确定';
                    this.confirmlBtn.style.cssText = 'flex-grow: 1;height: 50px;line-height: 50px;text-align: center;border-left: 1px solid #ccc;'
                    this.confirmlBtn.addEventListener('click', this.confirm.bind(this), false);
                    this.cancelBtn.addEventListener('click', this.cancel.bind(this), false);
                    this.titleHtml.addEventListener('mousedown', this.mousedown.bind(this), false)
                    document.body.addEventListener('mousemove', this.mousemove.bind(this), false)
                    document.body.addEventListener('mouseup', this.mouseup.bind(this), false)
                    bottom.appendChild(this.cancelBtn);
                    bottom.appendChild(this.confirmlBtn);
                    this.wrap.appendChild(this.titleHtml);
                    this.wrap.appendChild(content);
                    this.wrap.appendChild(bottom);
                    this.mask.appendChild(this.wrap);
                    fragment.appendChild(this.mask);
                    document.body.appendChild(fragment);
                }
                confirm() {
                    this.close();
                }
                cancel() {
                    this.close();
                }
                close() {
                    this.mask.parentNode.removeChild(this.mask);
                    this.confirmlBtn.removeEventListener('click', this.confirm);
                    this.cancelBtn.removeEventListener('click', this.cancel);
                    this.titleHtml.removeEventListener('mousedown', this.mousedown)
                    document.body.removeEventListener('mousemove', this.mousemove)
                    document.body.removeEventListener('mouseup', this.mouseup)
                }
                mousedown(e) {
                    this.isDown = true;
                    this.x = e.clientX;
                    this.y = e.clientY;
                }
                mousemove(e) {
                    if(this.isDown){
                        let dx = e.clientX - this.x;
                        let dy = e.clientY - this.y;
                        this.x = e.clientX;
                        this.y = e.clientY;
                        this.wrap.style.left = parseFloat(this.wrap.style.left) + dx + 'px';
                        this.wrap.style.top = parseFloat(this.wrap.style.top) + dy + 'px';
                    }
                }
                mouseup(e) {
                    this.isDown = false;
                }
            }
            document.getElementById('btn').onclick = function() {
                new Dialog({title: '提示', content: '确定要删除吗'});
            }
            
        </script>
    </body>
</html>